<template>
  <!-- 账户信息 -->
  <SectionContainer class="u-p30">
    <SectionTitle>账户信息
      <el-tooltip
        slot="tip"
        class="item"
        effect="dark"
        placement="top"
        content="数据更新时间2小时，当天数据仅供参考，请以隔天数据为准"
      >
        <i class="iconfont iconfont-10 c-hint-major"></i>
      </el-tooltip>
    </SectionTitle>
    <el-row type="flex">
      <el-col>
        <div class="c-text-high u-fs36 u-mb10">
          <AnimateNumber :number="accountRemain"></AnimateNumber>
        </div>
        <div class="c-text-minor">账户余额（元）</div>
      </el-col>
      <el-col>
        <div class="c-text-high u-fs36 u-mb10">
          <AnimateNumber :number="accountExpend"></AnimateNumber>
        </div>
        <div class="c-text-minor">今日总消耗（元）</div>
      </el-col>
    </el-row>
  </SectionContainer>
</template>

<script>
import { mapState } from "vuex";

import SectionTitle from "@/components/section-title";
import SectionContainer from "@/components/section-container";
import AnimateNumber from "@/components/animate-number";

import { sessionStorage } from "@/utils";

import { fetchHomeAccount } from "@/api";

export default {
  components: {
    SectionTitle,
    SectionContainer,
    AnimateNumber
  },
  data() {
    return {
      user: sessionStorage.get("USER"),
      accountExpend: 0
    };
  },
  computed: {
    ...mapState({
      accountRemain: state => state.AccountRemain.remain
    })
  },
  methods: {
    // 账户信息
    fetchHomeAccount() {
      fetchHomeAccount({
        query: {
          userId: this.user.userId
        }
      }).then(res => {
        this.accountExpend = res.data.consum;
      });
    }
  },
  created() {
    this.fetchHomeAccount();
  }
};
</script>